<template>
  <div class="loginBc">
    <div class="formInfo">
      <p>欢迎使用！</p>
      <el-form
          label-width="80px"
          :model="loginInfo"
          :rules="rules"
          ref="loginForm"
      >
        <el-form-item label="用户名" required prop="username">
          <el-input v-model="loginInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" required prop="password">
          <el-input type="password" show-password v-model="loginInfo.password" @keydown.enter="submitForm"></el-input>
        </el-form-item>
        <el-form-item>
          <el-space>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="success" @click="dialogFormVisible = true">注册</el-button>
            <el-button @click="loginForm.resetFields()">重置</el-button>
            <el-button @click="testIsLogin">测试</el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </div>

    <!--注册对话框-->
    <el-dialog title="注册用户" v-model="dialogFormVisible" destroy-on-close :before-close="clearData()">
      <el-form ref="registerForm" :model="userInfo" :rules="registerFormRules" label-width="70px">
        <el-form-item label="用户名" required prop="username">
          <el-input v-model="userInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" required prop="password">
          <el-input type="password" show-password v-model="userInfo.password" @keydown.enter="submitForm"></el-input>
        </el-form-item>
        <el-form-item label="电话号" required prop="telNumber">
          <el-input v-model="userInfo.telNumber"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" required prop="email">
          <el-input v-model="userInfo.email"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="registerFormSub">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>


</template>

<script>
import useLogin from '../hooks/LoginHook'
import useRegister from '../hooks/RegisterHook'

export default {
  name: "Login",
  setup() {
    /*  这一大堆内容可以放在一个组合函数里面了！
    //表单内容
    let loginInfo = reactive({
      username: '',
      password: ''
    })
    //表单校验
    let rules = reactive({
      username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
      password: [{required: true, message: '请输入密码', trigger: 'blur'}]
    })
    //表单标记
    let loginForm = ref(null)
    //vuex
    let store = useStore()

    //提交表单方法
    function submitForm() {
      //逆天的写法，我麻了
      loginForm.value.validate(async (valid) => {
        if (valid) {
          //表单校验成功，准备登录
          let {data} = await login(loginInfo)
          if (data.status + '' === '999') {
            //登录失败
            ElMessage.error(`登录失败：${data.info}`)
          } else if (data.status + '' === '200') {
            //登录成功
            ElMessage.success('登录成功！')
            console.log('data',data)
            //修改vuex中的数据
            store.commit('loginStore/UPDATE_TOKEN', data.token)
          }
        }
      })
    }

    //测试是否登录
    async function testIsLogin() {
      let {data} = await isLogin()
      console.log('是否', data)
    }
    */

    return {
      ...useLogin(),
      ...useRegister()
    }
  }
}
</script>

<style scoped>
.formInfo {
  width: 400px;
  height: 500px;
  /*border: 1px black solid;*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*登陆页面背景*/
.loginBc {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px black solid;
  background: url("../assets/bg.jpg") no-repeat;
  background-size: cover;
  background-attachment: fixed;

}

</style>
